<template>
  <div>
    <div class="container-fluid col-xxl-8 px-4 py-5">
      <div class="row flex-lg-row-reverse align-items-center g-5 py-5">
        <div class="col-10 col-sm-8 col-lg-6">
          <img alt="Safety" class="d-block mx-lg-auto img-fluid" height="300" loading="lazy"
            src="../assets/Introduce/safety.svg" width="600" />
        </div>
        <div class="col-lg-6">
          <h1 class="display-5 fw-bold lh-1 mb-3">LumbaShark</h1>
          <p class="lead">
            {{ $t("introduce.description") }}
          </p>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start" v-if="!cookies.isKey('access_token')">
            <router-link :to="{ name: 'user.sign', query: { mode: 'signup' } }"
              class="btn btn-primary btn-lg px-4 me-md-2">{{ $t("common.actions.signup") }}</router-link>
          </div>
          <div class="d-grid gap-2 d-md-flex justify-content-md-start" v-else>
            <a target="_blank" href="https://lumbashark-docs.netlify.app" class="btn btn-primary btn-lg px-4 me-md-2"
              v-if="store.account.accountGroup != null">{{ $t("introduce.actions.document") }}</a>
            <a href="#" v-else class="btn btn-primary btn-lg px-4 me-md-2">{{
              $t("introduce.actions.user-center")
            }}</a>
            <router-link :to="{ name: 'developer.signup' }" v-if="store.account.accountGroup == null"
              class="btn btn-outline-primary btn-lg px-4 me-md-2">{{ $t("introduce.actions.become-developer") }}
            </router-link>
            <router-link :to="{ name: 'developer.center' }" v-else class="btn btn-outline-primary btn-lg px-4 me-md-2">
              {{ $t("introduce.actions.developer-center") }}</router-link>
          </div>
        </div>
      </div>
    </div>

    <div id="featured-3 pb-0" class="container px-4 py-5">
      <h2 class="pb-2 border-bottom">{{ $t("introduce.features.title") }}</h2>
      <div class="row g-4 pt-5 row-cols-1 row-cols-lg-3">
        <div class="feature col">
          <div class="feature-icon bg-primary bg-gradient">
            <i class="bi bi-heart-fill" style="font-size: 1em"></i>
          </div>
          <h2>{{ $t("introduce.features.developer-friendly.title") }}</h2>
          <p>
            {{ $t("introduce.features.developer-friendly.description") }}
          </p>
        </div>
        <div class="feature col">
          <div class="feature-icon bg-primary bg-gradient">
            <i class="bi bi-hdd-stack-fill" style="font-size: 1em"></i>
          </div>
          <h2>{{ $t("introduce.features.server-easy.title") }}</h2>
          <p>
            {{ $t("introduce.features.server-easy.description") }}
          </p>
        </div>
        <div class="feature col">
          <div class="feature-icon bg-primary bg-gradient">
            <i class="bi bi-shield-lock-fill" style="font-size: 1em"></i>
          </div>
          <h2>{{ $t("introduce.features.protect-data.title") }}</h2>
          <p>
            {{ $t("introduce.features.protect-data.description") }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { useRoute } from "vue-router";
import { useCookies } from "vue3-cookies";
import { onMounted } from "vue";
import { useStore } from "../stores/main";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const { cookies } = useCookies();
const store = useStore();
const message = useMessage();
const route = useRoute();

onMounted(() => {
  if (route.params["message"]) {
    if (route.params["i18nMessage"]) message.info(t(route.params["message"]))
    else message.info(route.params["message"]);
  }
})</script>

<style scoped>
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: 0.75rem;
}
</style>
